<template>
  <div class="main">
      <!-- 用户信息 -->
      <div class="info">
          <div class="header">
              <!-- 头像 -->
              <img src="@/assets/20211124190103_d2e03.jpg" alt="">
          </div>
          <!-- 内容 -->
          <div class="content">
            <p>
                <span>北辞</span>
                <span>使者人数：30</span>
                <span>vip奖励总天数：30</span>
                <span>使者令牌：TYFISWQO</span>
                <span @click="help" style="font-size:15px;color:rgb(229 145 19)" class="el-icon-question"></span>
            </p>
          </div>
      </div>
       <el-divider><i style="color:#ffcd35" class="el-icon-present"></i></el-divider>
      <!-- 奖品池 -->
      <div class="award">
          <div> 
            <p style="line-height: 80px;text-align:center">vip7天</p>
          </div>
      </div>
       <el-divider><i style="color:#ffcd35" class="el-icon-notebook-2"></i></el-divider>   
       <!-- 拉取的人 -->
       <div class="persontable">
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="使者id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="award"
                label="奖品"
                width="180">
            </el-table-column>
            <el-table-column
                prop="date"
                label="输入时间">
            </el-table-column>
            </el-table>
       </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tableData:[
                {
                    id:1,
                    date:"2021/11/13 23:23:23",
                    award:"vip7天"
                },
                
                {
                    id:1,
                    date:"2021/11/13 23:23:23",
                    award:"vip7天"
                },
                {
                    id:1,
                    date:"2021/11/13 23:23:23",
                    award:"vip7天"
                },
                {
                    id:1,
                    date:"2021/11/13 23:23:23",
                    award:"vip7天"
                },
                {
                    id:1,
                    date:"2021/11/13 23:23:23",
                    award:"vip7天"
                }
            ]
        }
    },
    methods:{
        help(){
            this.$alert("推使者玩法介绍：当您同意加入推使者活动时您就会进入到当前页面，获取到您的使者令牌，您可以凭借着你的使者令牌，给予您的好友，当您的好友使用您的令牌进行注册账号后，您将获得相对应的奖品！")
        }
    },
    created(){
        // // 检查是否登录
        // if(sessionStorage.getItem("TOKEN")==null||sessionStorage.getItem("TOKEN")==""){
        //     this.$router.push("/")
        //     this.$alert("请进行登录")
        // }else{
        //     this.initData();
        // }
    },
      mounted(){
   document.documentElement.scrollTop=0
  },
}
</script>

<style scoped lang="less">
    .main{
        width: 60%;
        height: 1300px;
        margin: 20px auto;
        .info{
            width: 100%;
            height: 80px;
            background: #ffcd35;
            border-radius: 5px;
            .header{
                padding: 10px;
                width: 80px;
                height: 100%;
                img{
                    width: 100%;height: 100%;border-radius: 50%;
                }
                float: left;
            }
        .content{
            width: 1000px;
            height: 100%;
            float: left;
            p{
                line-height: 120px;
                span{
                    margin-right: 10px;
                    font-size: 10px;
                }
            }
            }
        }
        .award{
            width: 100%;
            height: 80px;
            background: #ffcd35;
            margin-top: 10px;
            div{
                width: 100px;
                float: left;
                height: 100%;
                
            }
        }
        .persontable{
            width: 100%;
            height: 300px;
            margin-top: 10px;
        }
    }
         @media  screen and (max-width: 1300px) {
        .main{
            width: 100% !important;
            .info{
                .content{
                    width: 400px !important;
                }
            }
        }
      
     }
</style>